<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>修改密码</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="css/base/commonality.css" />
	<link rel="stylesheet" type="text/css" href="css/base/base_account_pwd.css" />
</head>

<body>
<header>
	<!-- 头部暂时不用写 -->
</header>
<section>
	<!-- 内容部分 -->
	<div class="content-wrapper">
		<div class="row">
			<div class="card-body">
				<div class="pointpwd">
					修改密码
				</div>
				<hr class="line" />
				<div class="uppwd">
					<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#mymodal" id="upPwd">修改密码</button>

				</div>
				<div class="up">
					<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#updatePassByPhone" id="upByPhone">通过手机号重置密码</button>


				</div>
				<div class="text_2774X1">
					<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#updatePassByEmail" id="upByEmail">通过邮箱重置密码</button>


				</div>
			</div>
			<!--修改密码-->
			<div id="updatePass">
				<div id="mymodal" class="modal fade bs-examlpe-modal-sm"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
					<div class="modal-dialog modal-sm"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
						<div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
							<div class="modal-header">
								<button class="close" data-dismiss="modal">&times;</button>
								<h4 class="modal-title">修改密码</h4>
							</div>
							<div class="media-body">
								<form action="#">
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;原密码：</span>
										<input type="text" name="" id="oldPwd" class="form-control" placeholder="请输入原密码" />
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;新密码：</span>
										<input class="form-control" id="newPwd" name="" type="password" placeholder="请输入新密码"/>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">确认密码：</span>
										<input class="form-control" id="confimpwd" name="" type="password" placeholder="请再次输入新密码"/>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP" id="divsure">
										<button class="update">修改</button>
									</div>
									<div class="col-md-12 myB">
										<button class="not sure" onclick="closemodel()">暂不修改</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--修改密码通过手机号-->
			<div id="updatePass">
				<div id="updatePassByPhone" class="modal fade bs-examlpe-modal-sm"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
					<div class="modal-dialog modal-sm"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
						<div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
							<div class="modal-header">
								<button class="close" data-dismiss="modal">&times;</button>
								<h4 class="modal-title">通过手机号修改密码</h4>
							</div>
							<div class="media-body">
								<form action="#">
									<div class="col-md-10 col-md-offset-1 myMP">
										<span>当前手机号：13800138000</span>  <a href="#">发送验证码</a>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</span>
										<input type="text" name="" class="form-control" id="phone-code" placeholder="请输入验证码" />
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;新密码：</span>
										<input class="form-control" id="phone-newpwd" name="" type="password" placeholder="请输入新的登陆密码"/>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">确认密码：</span>
										<input class="form-control" id="phone-confimpwd" name="" type="password" placeholder="请再次输入新密码"/>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP" id="divsure">
										<button class="phone-update">修改</button>
									</div>
									<div class="col-md-12 myB">
										<button class="not sure" onclick="closemodel()">暂不修改</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--修改密码通过邮箱-->
			<div id="updatePass">
				<div id="updatePassByEmail" class="modal fade bs-examlpe-modal-sm"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
					<div class="modal-dialog modal-sm"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
						<div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
							<div class="modal-header">
								<button class="close" data-dismiss="modal">&times;</button>
								<h4 class="modal-title">通过邮箱修改密码</h4>
							</div>
							<div class="media-body">
								<form action="#">
									<div class="col-md-10 col-md-offset-1 myMP">
										<span>当前邮箱：abc1234@qq.com</span>  <a href="#">发送验证码</a>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</span>
										<input type="text" name="" id="email-code" class="form-control" placeholder="请输入验证码" />
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">&nbsp;&nbsp;&nbsp;&nbsp;新密码：</span>
										<input class="form-control" id="email-newpwd" name="" type="password" placeholder="请输入新的登陆密码"/>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP">
										<span class="character">确认密码：</span>
										<input class="form-control" id="email-confimpwd" name="" type="password" placeholder="请再次输入新密码"/>
									</div>
									<div class="col-md-10 col-md-offset-1 myMP" id="divsure">
										<button class="email-update">修改</button>
									</div>
									<div class="col-md-12 myB">
										<button class="not sure" onclick="closemodel()">暂不修改</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	</div>
</section>
<footer>
	<!-- 尾部 -->
</footer>
<script type="text/javascript" src="layui/layui.js" ></script>
<link src="js/bootstrap.min.css"></link>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/base/base_account_pwd.js" type="text/javascript"></script>
<script>
	$(document).ready(function(){
		/*修改密码*/
		$(".update").click(function  () {
			var pwd=$("#newPwd").val();
			var re_password=/^[0-9a-zA-Z]{6,12}$/;

			var confimpwd=$("#confimpwd").val();

			if($("#oldPwd").val()==""){
				tan("请输入原密码");
			}else if($("#newPwd").val()==""){
				tan("请输入原密码");
			}
			else if(pwd==""){
				tan("请输入原密码");
			}else if(re_password.test(pwd)==false){
				tan("请输入正确格式的密码");
			}
			else if(pwd!=confimpwd){
				tan("两次密码不一致");
			}
		})

		/*修改密码通过手机号*/

		$(".phone-update").click(function  () {
			var code=$("#phone-code").val();
			var pwd=$("#phone-newpwd").val();
			var re_password=/^[0-9a-zA-Z]{6,12}$/;
			var confimpwd=$("#phone-confimpwd").val();

			if(code==""){
				tan("请输入验证码");
			}
			else if(pwd==""){
				tan("请输入原密码");
			}else if(re_password.test(pwd)==false){
				tan("请输入正确格式的密码");
			}
			else if(pwd!=confimpwd){
				tan("两次密码不一致");
			}
		})

		/*修改密码通过邮箱*/

		$(".email-update").click(function  () {
			var code=$("#email-code").val();
			var pwd=$("#email-newpwd").val();
			var re_password=/^[0-9a-zA-Z]{6,12}$/;
			var confimpwd=$("#email-confimpwd").val();

			if(code==""){
				tan("请输入验证码");
			}
			else if(pwd==""){
				tan("请输入原密码");
			}else if(re_password.test(pwd)==false){
				tan("请输入正确格式的密码");
			}
			else if(pwd!=confimpwd){
				tan("两次密码不一致");
			}
		})



	})

	/*关闭弹窗*/
	function closemodel () {
		$('.modal.fade.bs-examlpe-modal-sm').modal('hide');

	}
	/*弹窗提示方法*/
	function tan (mes) {
		layui.use(['layer', 'form'], function(){
			var layer = layui.layer,
					form = layui.form;
			layer.msg(mes);
		})


	}

</script>
</body>

</html>